<template>
  <footer class="footer">
    <span class="todo-count">
      <strong>{{ unNum }}</strong> 未完成
    </span>
    <ul class="filters">
      <li>
        <a
          :class="{ selected: status === 'all' }"
          @click.prevent="handleClick('all')"
          href="#/all"
          >All</a
        >
      </li>
      <li>
        <a
          :class="{ selected: status === 'active' }"
          @click.prevent="handleClick('active')"
          href="#/active"
          >Active</a
        >
      </li>
      <li>
        <a
          :class="{ selected: status === 'completed' }"
          @click.prevent="handleClick('completed')"
          href="#/completed"
        >
          Completed
        </a>
      </li>
    </ul>
    <button class="clear-completed">Clear completed</button>
  </footer>
</template>

<script>
export default {
  props: {
    items: Array,
    status: String
  },

  // data() {
  //   return {
  //     // 'all' - all
  //     // 'active' - active
  //     // 'completed' - completed
  //     status: "all",
  //   };
  // },

  computed: {
    // 未完成的数量
    unNum() {
      return this.items.filter((item) => !item.isDone).length;
    },
  },

  methods: {
    handleClick(status) {
      // this.status = status
      // 触发一个自定义事件
      this.$emit('update:status', status)
    }
  }
};
</script>
